<template>
  <div>
    <template v-if="UserList.length == 0">
      <div class="nouser">你还没有关注过其他人</div>
    </template>
    <template v-else>
      <div v-for="users in UserList" :key="users.uid" class="bian">
        <div class="userstyle">
          <!-- 头像 -->
          <img :src="users.image" alt="" @click="getUserDetails(users.uid)" />
          <!-- 用户名 -->
          <span @click="getUserDetails(users.uid)">{{ users.name }}</span>
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="attention(1, users.uid)"
              >取消关注</el-button
            >
          </div>
          <!-- <el-divider></el-divider> -->
        </div>
      </div>
    </template>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { attentionFindall, attentionUpdate} from "../../../api/attention";
export default {
  name: "Attention_user",
  data() {
    return {
      UserList: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        uid: localStorage.getItem("uid"),
      },
      pageTotal: 0,
      isShow: true,
    };
  },
  created() {
    this.getUserAttention();
  },
  methods: {
    getUserAttention() {
      attentionFindall(this.query).then((res) => {
        // console.log(res);
        this.UserList = res.data.list;
        // 分页数据
        this.pageTotal = res.data.total;
      });
    },
    handlePageChange(val) {
      this.$set(this.query, "pageNum", val);
      this.getUserAttention();
    },
    // 用户关注
    attention(status, beuid) {
      let data = {
        uid: localStorage.getItem("uid"),
        beuid: beuid,
        is_delete: status,
      };
      attentionUpdate(data).then((res) => {
        // console.log(res);
        this.getUserAttention();
      });
    },
    //用户详情
    getUserDetails(uid) {
      localStorage.setItem("otherUid", uid)
      this.$router.push("/otheruserpage")
    },
  },
};
</script>
<style scoped>
.nouser {
  height: 100px;
  font-size: 15px;
  color: #a4b0be;
  text-align: center;
  line-height: 100px;
}
.bian {
  /* border-bottom: solid 1px #f0f0f0; */
  background-color: #fff;
}
.userstyle {
  position: relative;
  padding: 10px 30px;
}
.userstyle > img {
  width: 45px;
  height: 45px;
  border-radius: 22.5px;
  display: inline-block;
  vertical-align: middle;
}
.userstyle > span {
  margin-left: 20px;
  display: inline-block;
  font-size: 20px;
  color: #2f3542;
  vertical-align: middle;
}
.userstyle > div {
  display: inline-block;
  position: absolute;
  right: 30px;
  top: 21px;
}
</style>
